<template>
    <div class="rightbox font">
        <div class="consult flex aic">
            <img src="../../../assets/img/touxiang.jpg">

        </div>

        <div class="info f14 ">
            <div class="flex mt-20">
                <p class="what "
                    style="background-color: #ffffff;border: 1px solid #D5D8D8;border-radius: 15px 15px 15px 5px;">
                    哈哈哈哈i佛山规划都i给偶得更好的风格和肯定更好看好的开国皇帝看过的快感和咖啡馆哈哈哈</p>
            </div>
            <div class="flex mt-20 jc-e">
                <p class="what "
                    style="background-color: #6193D2;border: 1px solid #D5D8D8;color: #ffffff;border-radius: 15px 15px 5px 15px;">
                    哈哈哈哈i佛山规划哈</p>
            </div>
            <div class="flex mt-20">
                <p class="what "
                    style="background-color: #ffffff;border: 1px solid #D5D8D8;border-radius: 15px 15px 15px 5px;">
                    更好看好的开国皇帝看过的快感和咖啡馆哈哈哈</p>
            </div>
        </div>

        <div class="chat pl-10 pr-10 flex fdc">
            <el-input v-model="chat" :autosize="{ minRows: 5, maxRows: 4 }" type="textarea"
                placeholder="please enter" />
            <el-button class="mt-10 flex jc-e" type="primary" round>dispatch</el-button>
        </div>
    </div>


</template>

<script setup>
import { ref } from 'vue'
const chat = ref('')
defineProps(
    {
        state: Boolean
    }
)

</script>

<style lang="less" scoped>
.rightbox {
    height:100%;
    border-radius: 10px;
    position: relative;
    border: 1px solid #D5D8D8;

    .consult {
        background-color: #ffffff;
        border-radius: 10px 10px;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 10px;
        }
    }

    .info {

        overflow-y: auto;
        padding: 10px;
        height: 800px;

        .what {
            border: 1px solid #a5a5a5;
            padding: 5px;
            border-radius: 10px;
            height: auto;
        }
    }

    .info::-webkit-scrollbar {
        width: 5px;
    }

    .info::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        border-radius: 10px;
    }

    .chat {

        position: absolute;
        bottom: 10px;
        width: 100%;
    }
}
</style>